import { Descriptions } from 'antd';
import React, { useState, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { queryPerformanceDetailsReports } from './service';
import { connect } from 'dva';
import {formatPrice} from '@/utils/utils';

const PayReport = () => {
  const [totalInfo,setTotalInfo] = useState({});
  const [columns, setColumns] = useState([
    {
      title: '会员名称',
      dataIndex: 'memberName',
    },
    {
      title: '课程名称',
      dataIndex: 'courseName',
    },
    {
      title: '课程售价',
      dataIndex: 'sellPrice',
      hideInSearch: true,
      render:(text)=>`${formatPrice(text??0)}元`
    },
    {
      title: '授课价格',
      dataIndex: 'classHourSubsidy',
      hideInSearch: true,
      render:(text)=>`${formatPrice(text??0)}元`
    },
    {
      title: '消费时间',
      dataIndex: 'startTime',
      valueType: 'dateRange',
      search: {
        transform: (value) => ({ startTime: value[0], endTime: value[1] }),
      },
      render:(text,record)=>`${record.startTime??''}~${record.endTime??''}`
    },
  ]);
  const actionRef = useRef();
  return (
    <PageHeaderWrapper  content={<Descriptions>
      <Descriptions.Item label="消课总金额">{formatPrice(totalInfo.sumConsume??0)}元</Descriptions.Item>
      <Descriptions.Item label="私教消课总金额">{formatPrice(totalInfo.privateTeachingConsume??0)}元</Descriptions.Item>
      <Descriptions.Item label="团课消课总金额">{formatPrice(totalInfo.groupLessonsConsume??0)}元</Descriptions.Item>
      <Descriptions.Item label="小班消课总金额">{formatPrice(totalInfo.smallClassesConsume??0)}元</Descriptions.Item>
      <Descriptions.Item label="剩余未消课总金额">{formatPrice(totalInfo.surplusConsume??0)}元</Descriptions.Item>
    </Descriptions>}>
     <ProTable
        actionRef={actionRef}
        rowKey="id"
        pagination={false}
        request={params => {
          let _params = {
            pageNum: params.current,
            ...params,
          }
          delete _params.current
          return queryPerformanceDetailsReports(_params)
        }}
        postData={result=>{
          setTotalInfo(result);
          return result.detailedVO;
        }}
        columns={columns}
      />
    </PageHeaderWrapper>
  );
};

export default connect(({ loading,cubePayReport }) => ({
  shopList: cubePayReport.shopList,
  columnsList:cubePayReport.columnsList
}))(PayReport);